<template>
  <div class="lineechart">
    <baseEchart :options="options"></baseEchart>
  </div>
</template>

<script setup>
import { computed, defineProps } from "vue";
import baseEchart from "@/base-ui/echart";

const props = defineProps({
  values: {
    type: Array,
  },
  xLabels: {
    type: Array,
  },
});

const options = computed(() => {
  return {
    title: {
      text: "区域折线图",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: props.xLabels,
    },
    yAxis: {
      type: "value",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },

    series: [
      {
        data: props.values,
        type: "line",
        areaStyle: {},
      },
    ],
  };
});
</script>

<style lang="scss" scope>
.lineechart {
}
</style>
